// vuex 的子模块

// 不是所有的路由都可以被访问
// 静态路由可以一直被访问
// 动态路由需要权限 需要通过你的权限去访问

// 导入静态路由和动态路由
import { constantRoutes, asyncRoutes } from '@/router'

const state = {
  // 定义当前用户所拥有的用户权限
  routes: constantRoutes // 默认就有静态路由
}
const mutations = {
  // 更新路由的数据
  setRoutes(state, payload) {
    // 登录之后获取新的路由 合并 静态路由 和权限内的动态路由
    // ...constantRoutes 权限不重复
    // 首页显示
    state.routes = [...constantRoutes, ...payload]
  }
}
const actions = {
  // 筛选路由  通过menus 筛选出可以访问的动态路由表 返回 同时提交mutations
  filterRoutes({ commit }, menus) {
    const routes = []
    // menus 和动态路由表内的name进行匹配  得出匹配的路由表
    menus.forEach(key => {
      // key 就是一个标识
      routes.push(...asyncRoutes.filter(item => item.name === key))
      // 得到一个可以访问的动态路由数组
    })
    // 赋值给state 设置左侧导航
    commit('setRoutes', routes)
    // return 出来设置路由
    return routes
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
